<template>
  <div class="bgd_reg">
<div class="container" style="right: 120px;top: 160px;">
    <div class="header">
        <div class="left f_gray h_lf">
            我已注册！
        </div>
        <div class="left f_red">
        	<router-link to="login">
        		现在登录 &gt;
        	</router-link>
        </div>
    </div>
    <div>
        <div class="f_red f_weight txt_center" style="margin-top: 25px">
            用户注册
        </div>
        <div class="b_row">
            <span>
                <img src="../static/images/user_icon.png" />
            </span>
            <input v-model="referPhone" type="text" placeholder="推荐人" style="line-height: 1em;">
        </div>
        <div class="b_row">
            <span>
                <img src="../static/images/phone_icon.png" />
            </span>
            <input v-model="phone" type="text" placeholder="手机号" style="line-height: 1em;">
        </div>
        <div class="b_row">
            <span>
                <img src="../static/images/pwd_icon.png" />
            </span>
            <input v-model="password" type="text" placeholder="密码" style="line-height: 1em;">
        </div>
        <div class="simCode">
            <div class="b_row_code">
                <span>
                    <img src="../static/images/code_icon.png"/>
                </span>
                <input v-model="code"  type="text" placeholder="短信验证码" style="line-height: 1em;">
            </div>
            <div class="btn_code">
                <input @click="getCode" type='button' id="btn" value="免费获取验证码" >
            </div>
        </div>
        <div class="margin-left33 margin-top31">
            <input v-model="isChecked" type="checkbox">
            <label>我已阅读并同意《用户注册协议》</label>
        </div>
        <div class="b_row txt_center" style="border: 0;">
            <button :class="{isActive: isChecked}" v-bind:disabled="isDisabled" @click="registerClick" style="margin-top: 0;">立即注册</button>
        </div>
    </div>
</div>
  </div>
</template>

<script>
export default {
  created () {
    var self = this

  },
  data () {
    return {
      referPhone: '',
      phone: '',
      code: '',
      password: '',
      isDisabled: true,
      isChecked: false
    }
  },
  methods: {
    getCode: function () {
    	var self = this
      this.$api.get('/front/base/smscode', {
        phone: this.phone,
      }, r => {
      	console.log('r', r)
      	if(r.code===200){
        	self.$message({
        		type: "success",
        		message: r.data
        	})
        }else{
        	 self.$message(r.error);
        	 return false
        }
        var countdown = 60;
        function sendemail() {
          var obj = $("#btn");
          settime(obj);
        }
        function settime(obj) { //发送验证码倒计时
          if(countdown == 0) {
            obj.attr('disabled', false);
            //obj.removeattr("disabled");
            obj.val("免费获取验证码");
            countdown = 60;
            return;
          } else {
            obj.attr('disabled', true);
            obj.val("重新发送(" + countdown + ")");
            countdown--;
          }
          setTimeout(function() {
            settime(obj)
          }, 1000)
        }
        sendemail()
      })
    },
    registerClick: function () {
    	var self = this
      console.log('aa', typeof(this.phone))
      this.$api.post('/front/base/signUp', {
        referPhone: this.referPhone,
        phone: this.phone,
        code: this.code,
        password: this.password
      }, r => {
        console.log('r2', r)
        if(r.code===200){
        	self.$message({
        		type: "success",
        		message: r.data
        	})
          location.href = '/login'
        }else{
        	 self.$message(r.error);
        }
      })
    }
  },
  watch: {
    isChecked: function () {
      console.log('a', this.isChecked)
      if(this.isChecked === true) {
        this.isDisabled = false
      } else {
        this.isDisabled = true
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
